<template>
  <div class="box">
    <el-form :model="form" label-width="135px">
      <h3>基本信息</h3>
      <!-- 基本信息表单部分 -->
      <el-row :gutter="40">
        <el-col :span="11">
          <el-form-item label="标名：" required>
            <label>{{ form.name }}</label>
          </el-form-item>
          <el-form-item label="借款方：" required>
            <label>{{ form.userPhone }}</label>
          </el-form-item>
          <el-form-item label="年利率：" required>
            <label>{{ form.apr }}</label>
          </el-form-item>
          <el-form-item label="期限天数：" required>
            <label>{{ form.loanPeriod }}</label>
          </el-form-item>
          <el-form-item label="借款管理月费率：" required>
            <label>{{ form.loanMgrInterestRate }}</label>
          </el-form-item>
          <el-form-item label="逾期罚息利率：" required>
            <label>{{ form.overdue }}</label>
          </el-form-item>
          <el-form-item label="资金用途：" required>
            <label>{{ form.useOfFunds }}</label>
          </el-form-item>
        </el-col>

        <el-col :span="11">
          <el-form-item label="风险等级：" required>
            <label>{{ form.riskLevel }}</label>
          </el-form-item>
          <el-form-item label="借款总金额：" required>
            <label>{{ form.total }}</label>
          </el-form-item>
          <el-form-item label="还款方式：" required>
            <label>{{ form.repayment }}</label>
          </el-form-item>
          <el-form-item label="借款起息方式：" required>
            <label>{{ form.interestWay }}</label>
          </el-form-item>
          <el-form-item label="借款类型：" required>
            <label>{{ form.loanType }}</label>
          </el-form-item>
          <el-form-item label="还款来源：" required>
            <label>{{ form.asd }}</label>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 担保信息 -->
      <h3>担保信息</h3>
      <el-row :gutter="40">
        <el-col :span="11">
          <el-form-item label="是否担保：">
            <label>{{ form.guarantee.guaranteed }}</label>
          </el-form-item>
          <el-form-item label="是否抵押：">
            <label>{{ form.guarantee.mortgageType }}</label>
          </el-form-item>
        </el-col>

        <el-col :span="11">
          <el-form-item label="担保机构：">
            <label>{{ form.guarantee.guaranteeAgency }}</label>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 借款资料 -->
      <h3>借款资料</h3>
      <el-row>
        <el-col>
          <el-form-item label="借款资料：">
            <ImageList :imageList="form.loanInformation"></ImageList>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 标的信息 -->
      <h3>标的信息</h3>
      <el-row :gutter="40">
        <el-col :span="11">
          <el-form-item label="标名：" required>
            <label>{{ form.name }}</label>
          </el-form-item>
          <el-form-item label="标的类型：" required>
            <label>{{ form.borrowSubjectInfo.typeId }}</label>
          </el-form-item>
          <el-form-item label="递增金额：" required>
            <label>{{ form.borrowSubjectInfo.incrementalAmount }}</label>
          </el-form-item>
          <el-form-item label="投资计息方式：" required>
            <label>{{ form.borrowSubjectInfo.investmentInterestCalWay }}</label>
          </el-form-item>
          <el-form-item label="设置精选：" required>
            <label>{{ form.borrowSubjectInfo.featured }}</label>
          </el-form-item>
          <el-form-item label="募集时间：" required>
            <label>{{ form.borrowSubjectInfo.recruitmentTime }}</label>
          </el-form-item>
          <el-form-item label="开售时间：" required>
            <label>{{ form.borrowSubjectInfo.saleTime }}</label>
          </el-form-item>
        </el-col>

        <el-col :span="11">
          <el-form-item label="标签：" required>
            <label>{{ form.borrowSubjectInfo.tag }}</label>
          </el-form-item>
          <el-form-item label="最低起投金额：" required>
            <label>{{ form.borrowSubjectInfo.minInvestmentAmount }}</label>
          </el-form-item>
          <el-form-item label="最大可投金额：" required>
            <label>{{ form.borrowSubjectInfo.maxInvestmentAmount }}</label>
          </el-form-item>
          <el-form-item label="上架渠道：" required>
            <label>{{ form.borrowSubjectInfo.shelfChannel }}</label>
          </el-form-item>
          <el-form-item label="新手专享：" required>
            <label>{{ form.borrowSubjectInfo.exclusiveForNovices }}</label>
          </el-form-item>
          <el-form-item label="标的上架时间：" required>
            <label>{{ form.borrowSubjectInfo.gmtCreated }}</label>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-form :model="ruleForm" label-width="135px">
      <!-- 审核 -->
      <h3>审核</h3>
      <el-row>
        <el-col>
          <el-form-item label="是否通过：">
            <el-radio-group v-model="ruleForm.approved">
              <el-radio :label="false">否</el-radio>
              <el-radio :label="true">是</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col>
          <el-form-item label="备注：" prop="remark">
            <div class="btn">
              <el-input
                type="textarea"
                placeholder="请输入备注"
                v-model="ruleForm.remark"
                maxlength="300"
                show-word-limit
                :rows="8"
                style="width: 60%"
              >
              </el-input>
            </div>
          </el-form-item>
        </el-col>
      </el-row>

      <div class="across"></div>
      <div class="keystroke">
        <el-row>
          <el-button type="primary" @click="handleSubmit">提交</el-button>
          <el-button type="success" @click="handleReturn">返回</el-button>
        </el-row>
      </div>
    </el-form>
  </div>

  <!-- <div>

  </div> -->
</template>

<script>
import ImageList from "../../components/loan/ImageList.vue";
import { getLoanById, reviewLoan } from "../../http/loan";
export default {
  name: "LoanReviewde",
  components: {
    ImageList,
  },
  data() {
    return {
      // form:{
      //   apr: "", //年利率
      //   asd: "", //还款方式
      //   interestWay: "",
      //   loanMgrInterestRate: "", //借款管理月利率
      //   loanPeriod: "", //借款期限 （天）
      //   loanType: "", //借款类型
      //   name: "", //标名
      //   overdue: "", //逾期罚息利率
      //   repayment: "", //还款方式
      //   riskLevel: "", //风险等级
      //   termType: "", //期限类型（天）
      //   total: "", //借款金额
      //   useOfFunds: "", //资金用途
      //   userPhone: "", //借款人联系方式
      //   guaranteeAgency: "", //担保机构
      //   guaranteed: "", //是否担保
      //   mortgageType: "", //是否抵押
      //   typeId: "",
      //   tag:"",
      //   incrementalAmount: "",
      //   investmentInterestCalWay: "",
      //   featured: "",
      //   recruitmentTime: "",
      //   exclusiveForNovices: "",
      //   projectIntroduction: "",
      //   riskControlMeasures: "",
      //   shelfChannel:"",
      // },
      form: this.getInitRoleForm(),
      ruleForm: {
        approved: false,
        remark: "",
      },
      rules: {
        remark: [{ required: true, message: "请输入内容", trigger: "change" }],
      },
      formData: {},
    };
  },
  methods: {
    handleSubmit() {
      this.$refs.rules.validate((valid) => {
        if (valid) {
          console.log("提交");
          let baseInfoId = this.$route.params.id;
          reviewLoan({
            baseInfoId,
            ...this.ruleForm,
          })
            .then((res) => {
              if (res.data.code == 20000) {
                this.$router.push("/loan/loanfullb");
                this.$message.success("提交成功");
              } else {
                this.$message.error("提交失败！");
              }
            })
            .catch((err) => {
              console.error(err);
              this.$message.error("提交失败！");
            });
        } else {
          this.$message.error("请按规则填写表单！");
        }
      });
    },
    handleReturn() {
      console.log("返回");
      this.$router.push("/loan/loanfullb");
    },
  },
  watch: {
    formData() {
      this.form = this.getInitRoleForm();
    },
  },
  beforeMount() {
    let id = this.$route.params.id;
    if (!this._.isUndefined(id)) {
      getLoanById(id)
        .then((res) => {
          console.log("getLoanById:", res);
          if (res.data.code == 20000) {
            console.log(res);
            this.formData = res.data.data.info;
          } else {
            this.$message.error("请求标的详细信息出错！");
          }
        })
        .catch((err) => {
          console.err(err);
          this.$message.error("请求标的详细信息出错！");
        });
    }
  },
  beforeCreate() {
    const defaultData = {
      apr: "", //年利率
      asd: "", //还款方式
      interestWay: "",
      loanMgrInterestRate: "", //借款管理月利率
      loanPeriod: "", //借款期限 （天）
      loanType: "", //借款类型
      name: "", //标名
      overdue: "", //逾期罚息利率
      repayment: "", //还款方式
      riskLevel: "", //风险等级
      termType: "", //期限类型（天）
      total: "", //借款金额
      useOfFunds: "", //资金用途
      userPhone: "", //借款人联系方式
      loanInformation: [],//借款图片
      guarantee:{
        guaranteed: "", //是否担保
        guaranteeAgency: "", //担保机构
        mortgageType: "", //是否抵押
      },
      borrowSubjectInfo: {
        exclusiveForNovices: "", //新手专享
        featured: "", //设置精选
        gmtCreated: "", //上架时间
        incrementalAmount: "", //递增金额
        investmentInterestCalWay: "", //投资计息方式
        typeId: "", //标的类型
        tag: "", //标的标签
        recruitmentTime: "", //募集时间
        saleTime: "", //开售时间
        minInvestmentAmount: "", //最小起投金额
        maxInvestmentAmount: "", //最大可投金额
        shelfChannel: "", //上架渠道
      },
    };

    this.getInitRoleForm = function () {
      let obj = this._.cloneDeep(defaultData);
      if (this._.isEmpty(this.formData)) return obj;

      let formCopy = this._.cloneDeep(this.formData);
      let copy = function(obj, data, _) {
        for (let key in obj) {
          if(typeof obj[key] === "object" && data[key]) {
            copy(obj[key], data[key], _);
          } else {
            obj[key] = _.isNil(data[key]) ? obj[key] : data[key];
          }
        }
      }
      copy(obj, formCopy, this._);
      obj.guarantee.guaranteed = obj.guarantee.guaranteed ? "是" : "否";
      obj.guarantee.mortgageType = obj.guarantee.mortgageType ? "是" : "否";
      obj.loanInformation = formCopy.loanInformation.split(",");
      return obj;
    };
  },
};
</script>

<style scoped>
.box {
  width: 91%;
  margin: 80px 100px;
}
.across {
  border-top: 1px solid #dee1e6;
  width: 93%;
}
.keystroke {
  width: 260px;
  height: 15px;
  margin-top: 30px;
  margin-bottom: 100px;
  margin-left: auto;
  margin-right: auto;
}
</style>